{% include '/templates/admin_header.html' %}

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="/static/css/widget.css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.9.1.js">
	
</script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">
</script>
<script src="/static/js/jquery-ui-timepicker-addon.js" type="text/javascript">
</script>
<script type="text/javascript">
	jQuery(function($) {
		/*
		if ($('start_date_at')) {
		  var now = new Date();
		  var n_yy = now.getFullYear(), n_mm = now.getMonth() + 1, n_dd = now.getDate();
		  var n_hh = now.getHours(), n_ii = now.getMinutes(), n_ss = now.getSeconds();
		  var n_date = n_yy + "-" + (n_mm < 10 ? "0" + n_mm : n_mm) + "-" + (n_dd < 10 ? "0" + n_dd : n_dd);
		  var n_hour = (n_hh < 10 ? "0" + n_hh : n_hh) + ":" + (n_ii < 10 ? "0" + n_ii : n_ii) + ":" + (n_ss < 10 ? "0" + n_ss : n_ss);
		  $('#id_start_date_0').val(n_date);
		  $('#id_start_date_1').val(n_hour);
		}
		if ($('end_date_at')) {
		  var after = new Date();
		  after.setHours(after.getHours() + 1);
		  var a_yy = after.getFullYear(), a_mm = after.getMonth() + 1, a_dd = after.getDate();
		  var a_hh = after.getHours(), a_ii = after.getMinutes(), a_ss = after.getSeconds();
		  var a_date = a_yy + "-" + (a_mm < 10 ? "0" + a_mm : a_mm) + "-" + (a_dd < 10 ? "0" + a_dd : a_dd);
		  var a_hour = (a_hh < 10 ? "0" + a_hh : a_hh) + ":" + (a_ii < 10 ? "0" + a_ii : a_ii) + ":" + (a_ss < 10 ? "0" + a_ss : a_ss);
		  $('#id_end_date_0').val(a_date);
		  $('#id_end_date_1').val(a_hour);
		}
		 */
		$('#id_start_date_1,#id_end_date_1').timepicker({
			timeFormat : 'HH:mm:ss',
			stepHour : 1,
			stepMinute : 1,
			stepSecond : 1,
			buttonImageOnly : true,
			buttonImage : '/static/img/time.png',
			showOn : "button"
		});

		$("#id_start_date_0,#id_end_date_0").datepicker(
				{
					monthNamesShort : [ '1월', '2월', '3월', '4월', '5월', '6월',
							'7월', '8월', '9월', '10월', '11월', '12월' ],
					dayNamesMin : [ '일', '월', '화', '수', '목', '금', '토' ],
					weekHeader : 'Wk',
					minDate : new Date(),
					dateFormat : 'yy-mm-dd', //형식(2012-03-03)
					autoSize : false, //오토리사이즈(body등 상위태그의 설정에 따른다)
					changeMonth : true, //월변경가능
					changeYear : true, //년변경가능
					showMonthAfterYear : true, //년 뒤에 월 표시
					buttonImageOnly : true, //이미지표시
					buttonImage : '/static/img/calendar.png', //이미지주소
					showOn : "button", //엘리먼트와 이미지 동시 사용
					setDate : "today"
				});
	});
</script>

<!-- Content - Existing Events -->
<div id="content" class="flex">
  <h1>zerodyproject-d Events</h1>
  <div id="events">
    <div class="module" id="changelist">
      <div class="results">
        <table id="result_list">
          <thead>
            <tr>
              <th scope="col" class="sortable">
                <div class="text">
                  <a href="?o=1.-1">ID</a>
                </div>
                <div class="clear"></div>
              </th>
              <th scope="col" class="sortable"><div class="text">Visible</div></th>
              <th scope="col" class="sortable"><div class="text">Title</div></th>
              <th scope="col" class="sortable"><div class="text">Message</div></th>
              <th scope="col" class="sortable"><div class="text">Trigger</div></th>
              <th scope="col" class="sortable"><div class="text">Start at</div></th>
              <th scope="col" class="sortable"><div class="text">End at</div></th>
              <th scope="col" class="sortable"><div class="text">Count</div></th>
              <th scope="col" class="sortable"><div class="text">Reward Type</div></th>
              <th scope="col" class="sortable"><div class="text">Reward Data</div></th>
            </tr>
          </thead>
          <tbody>
            {% for event in events %}
            <tr class="row{{ event.index % 2 }}">
              <th><a href="/admin/events/{{event.id}}">{{event.id}}</a></th>
              <td>{{event.visible}}</td>
              <td>{{event.title}}</td>
              <td>{{event.message}}</td> {% if event.trigger==0 %}
              <td>접속</td> {% elif event.trigger==1 %}
              <td>게임 결과</td> {% elif event.trigger==2 %}
              <td>친구 초대</td> {% else %}
              <td>에러</td> {% endif %}
              <td>{{event.start_at}}</td>
              <td>{{event.end_at}}</td>
              <td>{{event.count}}</td> {% if event.reward_type==0 %}
              <td>복숭아</td> {% elif event.reward_type==1 %}
              <td>코인</td> {% elif event.reward_type==2 %}
              <td>당근</td> {% elif event.reward_type==3 %}
              <td>에러</td> {% endif %}
              <td>{{event.reward_data}}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
<!-- End Content - Existing Events -->

<!-- Content - Add/Modify Events -->
<script type="text/javascript">
	function validateForm() {
		if (document.adding_form.title.value == ""
				|| document.adding_form.message.value == ""
				|| document.adding_form.count.value == ""
				|| document.adding_form.reward_data.value == "") {
			alert("Required fields must be filled out!");
			return false;
		}
		found = false;
		for (x = 0; x < document.adding_form.trigger.length; x++) {
			if (document.adding_form.trigger[x].selected) {
				found = true;
				break;
			}
		}
		if (found == false) {
			alert("Required fields must be filled out!");
			return false;
		}
		found = false;
		for (x = 0; x < document.adding_form.reward_type.length; x++) {
			if (document.adding_form.reward_type[x].selected) {
				found = true;
				break;
			}
		}
		if (found == false) {
			alert("Required fields must be filled out!");
			return false;
		}
		return true;
	}
</script>

<form enctype="multipart/form-data" onsubmit="return(validateForm());" action="/admin/events" method="post" name="adding_form">
  <div id="content" class="flex">
    {% if event %}
    <h1>Modify Event</h1>
    {% else %}
    <h1>Add Event</h1>
    {% endif %}
    <div id="new-event">
      <fieldset class="module aligned ">
        <div style='display: none'>
          <input type='hidden' name='eventId' value='{{event.id}}' />
        </div>
        <div class="form-row field-visible">
          <div>
            <label for="id_visible" class="required">Visible:</label>
            <div class="text">
              {% if event.visible %} <span><input type="checkbox" id="action-toggle" name="visible" checked="checked" /></span> {% else %} <span><input type="checkbox" id="action-toggle" name="visible" /></span> {% endif %}
            </div>
          </div>
        </div>

        <div class="form-row field-title">
          <div>
            <label for="id_title" class="required">Title:</label>
            <div class="text">
              <input type="text" name="title" maxlength="14" size="100" />
            </div>
          </div>
        </div>

        <div class="form-row field-message">
          <div>
            <label for="id_title" class="required">Message:</label>
            <div class="text">
              <input type="text" name="message" maxlength="20" size="160" />
            </div>
          </div>
        </div>

        <div class="form-row field-start_date">
          <div>
            <label for="id_start_date_0"> Start date: </label>
            <p class="datetime">
              Date: <input name="start_date_at" class="vDateField" type="text" id="id_start_date_0" style="width: 100px;" /> <br /> Time: <input name="start_time_at" class="vTimeField" type="text" id="id_start_date_1" style="width: 100px;" />
            </p>
          </div>
        </div>
        <div class="form-row field-end_date">
          <div>
            <label for="id_end_date_0"> Start date: </label>
            <p class="datetime">
              Date: <input name="end_date_at" class="vDateField" type="text" id="id_end_date_0" style="width: 100px;" /> <br /> Time: <input name="end_time_at" class="vTimeField" type="text" id="id_end_date_1" style="width: 100px;" />
            </p>
          </div>
        </div>

        <div class="form-row field-application-count">
          <div>
            <label for="id_count" class="required">count:</label> <input id="id_count" type="text" name="count" maxlength="256" size="100" /> <select name="trigger" id="id_trigger">
              <option value="0">접속</option>
              <option value="1">게임 결과</option>
              <option value="2">친구 초대</option>
            </select>
          </div>

          <div></div>
        </div>

        <div class="form-row field-name">
          <div>
            <label for="id_reward_type" class="required">Reward:</label> <select name="reward_type" id="id_reward_type">
              <option value="0">복숭아(수량)</option>
              <option value="1">코인(수량)</option>
              <option value="2">당근(수량)</option>
            </select> <input id="id_data" type="text" class="vIntegerField" name="reward_data" maxlength="9999" />(수량 또는 아이디)
          </div>
        </div>
        <div class="submit-row">
          <p class="backward-box">
            <a href="/admin/">Back</a>
          </p>
          {% if event %} <input type="submit" value="Modify" class="default" name="_modify" /> {% else %} <input type="submit" value="Save" class="default" name="_save" /> {% endif %}
        </div>
      </fieldset>
    </div>
  </div>
</form>

<script language="Javascript">
	if ("{{event.id}}") {
		if ("{{event.visible}}") {
			document.adding_form.visible.checked = "checked";
		}
		document.adding_form.title.value = "{{event.title}}";
		document.adding_form.message.value = "{{event.message}}";
		if ("{{event.start_date_at}}" != "None") {
			document.adding_form.start_date_at.value = "{{event.start_date_at}}";
		}
		if ("{{event.start_time_at}}" != "None") {
			document.adding_form.start_time_at.value = "{{event.start_time_at}}";
		}
		if ("{{event.end_date_at}}" != "None") {
			document.adding_form.end_date_at.value = "{{event.end_date_at}}";
		}
		if ("{{event.end_time_at}}" != "None") {
			document.adding_form.end_time_at.value = "{{event.end_time_at}}";
		}
		document.adding_form.count.value = "{{event.count}}";
		document.adding_form.trigger.value = "{{event.trigger}}";
		document.adding_form.reward_type.value = "{{event.reward_type}}";
		document.adding_form.reward_data.value = "{{event.reward_data}}";
	}
</script>
<!-- End Content - Add Notice -->
{% include '/templates/admin_footer.html' %}
